<template>
	<view class="account">
		<view class="part">
			<view class="title">个人信息</view>
			<view class="forms">
				<view class="line dFlex jBetween_aCenter">
					<text class="lineTit">头像</text>
					<view class='lineVal dFlex jEnd_aCenter'>
						<view class="tx imgPublic" @tap="changeTx">
							<image :src="datas.avatar"></image>
						</view>
						<view class="rightIcon imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter"> 
					<text class="lineTit">昵称</text>
					<view class='lineVal dFlex jEnd_aCenter'>
						<view class="ipt">
							<input type="text" placeholder="请输入昵称" @blur="change_name" v-model="datas.nickname" placeholder-style="color:#999999;font-size:14px;">
						</view>
						<view class="rightIcon imgPublic" style='visibility:hidden'>
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<text class="lineTit">手机号</text>
					<view class='lineVal dFlex jEnd_aCenter'>
						<view class="ipt">
							<input type="text" disabled v-model="datas.mobile" placeholder-style="color:#999999;font-size:14px;">
						</view>
						<view class="rightIcon imgPublic" style='visibility:hidden'>
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<!-- <view class="line dFlex jBetween_aCenter">
					<text class="lineTit">密码</text>
					<navigator url="./changePwd" hover-class="none" class='lineVal dFlex jEnd_aCenter'>
						<view class="ipt">
							<input type="text" disabled placeholder="点击修改密码" placeholder-style="color:#999999;font-size:12px;">
						</view>
						<view class="rightIcon imgPublic">
							<image src="../../static/images/right.png" mode="widthFix"></image>
						</view>
					</navigator>
				</view> -->
			</view>
		</view>
		<view class="loginBtn" @tap='quit'>退出登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datas:{},
				grade:[],
				gradeFlag:false,
				selGrade:'',
			};
		},
		onLoad() {
			
		},
		onShow(){
			this.initData();
		},
		onShareAppMessage() {
			this.tool.monitor();
			return {
				title:'加一精选',
				path:'/pages/seller',
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			} 
		},
		onShareTimeline() {
			this.tool.monitor();
			let share = {
				title:'加一精选',
				path:'/pages/seller',
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			}
			return share;
		},
		methods:{
			initData(){
				this.tool.getData('/api/user/info',{}).then(res=>{
					console.log(res);
					if(res){
						this.datas = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 修改头像
			changeTx(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success:(res)=>{
						if(res.tempFilePaths.length){
							res.tempFilePaths.map((item,index)=>{
								this.tool.upImg(item).then(thumb=>{
									if(thumb){
										this.tool.getData('/api/user/profile',{
											avatar:thumb.fullurl
										}).then(res2=>{
											if(res2){
												this.initData();
											}
										})
									}
								}).catch(err=>{
									console.log(err);
								})
							})
						}
					},
					fail:(err)=>{
						uni.showToast({
							title:"图片选择失败",
							icon:"none"
						})
					}
				})
			},
			// 修改昵称
			change_name(e){
				if(e.detail.value){
					this.tool.getData('/api/user/profile',{
						nickname:e.detail.value
					}).then(res2=>{
						if(res2){
							this.initData();
						}
					})
				}else{
					uni.showToast({
						title:'昵称不能为空',
						icon:"none"
					})
				}
			},
			// 退出登录
			quit(){
				uni.showModal({
					content:'确定退出当前账号？',
					success: (op) => {
						if(op.confirm){
							uni.removeStorageSync('uToken');
							getApp().globalData.isLogin = false;
							uni.switchTab({
								url:"/pages/my"
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #F6F6F6;
	}
	.account{
		width: 100%;
		padding: 12px 3.2%;
		box-sizing: border-box;
		.loginBtn{
			width: 74.4%;
			left: 12.8%;
			position: fixed;
			bottom: 32px;
			text-align: center;
			border-radius: 40px;
			color: white;
			padding: 22rpx 0;
			background: linear-gradient(180deg, #FC9700 0%, #FF5000 100%);
		}
		.part{
			width: 100%;
			background: white;
			border-radius: 8px;
			margin-bottom: 24px;
			.forms{
				width: 100%;
				.line{
					padding: 12px;
					box-sizing: border-box;
					border-bottom: 1px solid #E9E9E9;
					.lineTit{
						// font-weight: bold;
					}
					
					.lineVal{
						flex: 1;
						.tx{
							width: 40px;
							height: 40px;
							image{
								width: 40px;
								height: 40px;
								border-radius: 50%;
							}
						}
						.ipt{
							flex: 1;
							input{
								text-align: right;
							}
						}
						.rightIcon{
							width: 16px;
							margin-left: 4px;
						}
					}
				}
				.line:last-child{
					border: none;
				}
			}
			.title{
				padding: 16px 12px 12px;
				box-sizing: border-box;
				font-weight:bold;
			}
		}
	}
</style>
